//学科评估
<template>
  <div class="module_">
    <div class="mb8">
      <back />
      <search v-if="!noBumber" class="mt8" @clearSearch='clearSearch'>
        <el-form label-width='50px' inline autocomplete="off" :model="pageparm" class="search_box">
          <el-form-item label="科室">
            <inputSearch ref="search_d" :p_disabled="false" type="departments"
              @onChange='searchChane($event,"departments_id")' />
          </el-form-item>
        </el-form>
        <!-- <exportExcel slot="footer" :options="ops" :apiFn='Apievaluatetaskdetail' :name='ops.year + "年学科评估"' /> -->
      </search>
    </div>

    <myTable v-if="tableHeader.length > 0" :col="tableHeader" :tableData="tableData"
      :tableLoading="tableLoading" @handle="handle" :childMsg='pageparm' @callFather="callFather">
      <el-table-column align="center" show-overflow-tooltip prop="total" label="总分" width="100">
      </el-table-column>
    </myTable>

    <el-empty v-if="noBumber" :image-size="200" description="暂无数据"></el-empty>

    <el-dialog v-if="editFormVisible" :visible.sync="editFormVisible" width="920px" @click="editFormVisible = false"
      :close-on-click-modal='false' :close-on-press-escape='false'>
      <h2 slot="title" class="tx-c">{{dialogTitle}}</h2>
      <el-form autocomplete="off" label-width="180px" :model="editForm" class="form_flex">
        <el-form-item v-for="(v, i) in editHeaderList" :key="'edit' + i" :label="`${v.label}(${v.score}分)`"
          class="tip">
          <el-input size="medium" type="number" clearable v-model="editForm[v.prop]" @blur="watchNumber(v)"
            @mousewheel.native.prevent
            :placeholder="'请输入' + v.label" @input="checkScore($event,v.prop)" />
        </el-form-item>
        <input type="text" style="display:none">
      </el-form>
      <table class="table_cell" border="1" cellspacing="0">
        <tr>
          <th>指标</th>
          <th>指标说明</th>
          <th>备注</th>
        </tr>
        <tr v-for="(v,i) in editHeaderList" :key="'standard' + i">
          <td>{{`${v.label}(${v.score}分)`}}</td>
          <td v-html="v.instructions"></td>
          <td>{{v.desc}}</td>
        </tr>
      </table>
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Apievaluatetaskdetail,
    ApievaluatetaskdetailPut,
    ApievaluatetemplateInfo,
  } from '@/api'
  import {
    debounce,
    adminShow,
    throttle
  } from "@/utils/index";
  import myTable from "../components/myTable.vue"
  export default {
    name: 'subject_assess',
    components: {
      myTable
    },
    computed: {
      rules() {
        return this.editHeaderList.reduce((arr, item) => {
          arr.push(item.prop)
          return arr
        }, [])
      },
    },
    data() {
      return {
        Apievaluatetaskdetail,
        tableHeader: [],
        tableData: [],
        tableLoading: false,
        noBumber: false,
        editFormVisible: false,
        editForm: {}, //修改或者查看详情
        editForm_id: null,
        pageparm: {
          page: 1,
          perPage: 20,
          total: null,
          sort_str: null,
          sort_order: 'desc',
        },
        btnLoading: false,

        dialogTitle: '',
        editHeaderList: [],
        ops: {
          employees_id: this.$store.state.userInfo.employees_id,
          id: this.$route.query.id || null,
          year: this.$route.query.year || null,
          flag: true
        },
      }
    },
    created() {
      const template_id = this.$route.query.template_id
      const department_name = this.$store.state.userInfo.department
      ApievaluatetemplateInfo(template_id, {
        department_name
      }).then(res => {
        if(!res.data){
          this.noBumber = true
          return
        }
        this.tableHeader = res.data.template
        const newArr = []
        const threeIndex = (arr) => {
          arr.forEach(item=>{
            if(item.children.length > 0){
              threeIndex(item.children)
            }else{
              newArr.push(item)
            }
          })
        }
        threeIndex(res.data.template)
        this.editHeaderList = newArr
      })
    },
    mounted() {
      this.getList()
    },
    methods: {
      checkScore(v,ele){
        if(v.includes('.')){
          let [a,b] = v.split('.')
          if(b.length > 1) b = b.slice(0,2)
          this.editForm[ele] = a + "." + b
        }
      },
      //搜索
      clearSearch() {
        this.$refs.search_d.clear()
      },
      searchChane(i, val) {
        this.pageparm[val] = i
        this.pageparm.page = 1
        this.getList()
      },
      //分页
      callFather(pageparm) {
        this.pageparm.page = pageparm.page
        this.pageparm.perPage = pageparm.perPage
        this.getList()
      },
      getList() {
        this.tableLoading = true
        this.pageparm = {
          ...this.pageparm,
          ...this.ops
        }
        Apievaluatetaskdetail(this.pageparm).then(({
          data,
          page
        }) => {
          this.tableData = data || []
          this.pageparm.total = page.total
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
      handle(value) {
        this.editFormVisible = true
        for (const key in this.editForm) {
          this.editForm[key] = value[key]
        }
        this.editForm_id = value.id
        this.dialogTitle = value.discipline.name + '_评估打分'
      },
      watchNumber(item) {
        const {label,score,prop} = item
        if (Number(this.editForm[prop]) > score) {
          this.editForm[prop] = score
          this.$message.warning(`${label}最大分为${score}分`)
        }else if(Number(this.editForm[prop]) < 0){
          this.editForm[prop] = 0
          this.$message.warning(`${label}最小分为0分`)
        }
      },
      submit: debounce(function () { //提交  修改或新增
        const options = this.editForm
        for (const key of this.rules) {
          if (!options[key] && options[key] !== 0) {
            this.$message({
              type: 'error',
              message: '请打完并输入正确分数！'
            });
            return
          }
        }
        const ops = {
          id: this.editForm_id,
          evaluate_task_id: Number(this.$route.query.id),
          result: options
        }
        this.btnLoading = true
        ApievaluatetaskdetailPut(ops, this.editForm_id).then(res => {
          this.$message({
            type: 'success',
            message: '评分成功!'
          });
          this.editFormVisible = false
          this.getList()
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '评分失败!'
          });
        }).finally(() => {
          this.btnLoading = false
        });
      }, 800, true)
    },

  }
</script>
<style lang='less' scoped>
  .table_cell {
    width: 100%;
    margin: 16px auto 0;
    font-size: 16px;
    border-color: #EBEEF5;

    th {
      padding: 8px;
      font-size: 18px;
    }

    th:nth-of-type(1) {
      width: 140px;
    }

    th:nth-of-type(3) {
      width: 140px;
    }

    td {
      padding: 4px;
    }
  }
</style>